<template>
	<scroll-view scroll-y class="home_border">
		<view class="content-main" v-for="(value,key) in articleList" :key="key">
			<view class="content-top">
				<view class="top-title">
					{{value.content}}
				</view>
				<view class="top-like" :class="{active:value.like_id === 1}" @click="like_button(value.id)">
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
			<view class="content-mid">
				<image src="../../static/logo.png" mode=""></image>
				<image src="../../static/logo.png" mode=""></image>
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="content-bottom">
				<view class="bottom-type">
					{{value.type}}
				</view>
				<view class="bottom-look">
					{{value.show_num}}人浏览
				</view>
			</view>
		</view>
	</scroll-view>

</template>

<script>
	export default {
		name: "list-content",
		props: {
			aticle: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				imageId: '',
				imageids: [],
				articleList: [],
			};
		},
		created() {
			this.getArticles()
		},
		methods: {
			like_button(index) {
				uni.request({
					url: "http://localhost:8000/api/updataLike",
					method: 'POST',
					data: {
						class_id: index
					},
					success: (e) => {
						if (e.data.status === 'success') {
							uni.showLoading()
							uni.showToast({
								title: '操作成功',
							})
							this.getArticles()
						} else {
							uni.showLoading()
							uni.showToast({
								title: '操作失败',
							})
						}
					}
				})
			},
			getArticles() {
				uni.request({
					url: "/api/article",
					success: (e) => {
						//其中e.data。只是固定的用法，取传回来的数据，传回来的数据也是有自己的标签
						this.articleList = e.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.home_border {
		display: flex;
		box-sizing: border-box;
		padding-top: 5px;
		margin-top: 5px;
		min-height: calc(100vh - 138px);
		line-height: 5px;

		.content-main {
			margin-top: 5px;
			border: 1px red solid;
			display: flex;
			//垂直排列
			flex-direction: column;
			overflow: hidden;
			height: 150px;
			border: 1px #757580 solid;
			border-radius: 10px;

			.content-top {
				display: flex;
				height: 25px;
				align-items: center;
				//水平居中的设置
				justify-content: space-between;
				padding: 0 10px;

				.top-title {
					//只要是想居中，都必须要用flex的样式
					// display: flex;
					padding-top: 15px;
					align-items: center;
					font-size: 14px;
					font-weight: bold;
					width: 300px;
					height: 20px;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.top-like {
					&.active {
						background-color: red;
					}

					image {
						border-radius: 25px;
						height: 20px;
						width: 20px;
						flex-shrink: 0;

					}
				}
			}

			.content-mid {
				height: 100px;
				overflow: hidden;
				display: flex;

				image {
					height: 90px;
					padding: 5px 4px;
					border-radius: 20px;
				}
			}

			.content-bottom {
				padding: 0 10px;
				height: 30px;
				align-items: center;
				display: flex;
				justify-content: space-between;

				.bottom-type {
					//想要一个框里面的内容居中，那么一定要flex
					display: flex;
					align-items: center;
					justify-content: center;
					height: 22px;
					min-width: 70px;
					border: 1px red solid;
					color: red;
					border-radius: 30px;
				}

				.bottom-look {
					//想要一个框里面的内容居中，那么一定要flex
					display: flex;
					align-items: center;
					height: 20px;
					color: #757580;
					font-size: 12px;
				}
			}
		}

	}
</style>